<template>
  <div class="home">
    <div class="box1">
      <div class="card">
          <div class="logo">
          <img src="@/assets/img/1.png" alt="" />
        </div>
        <div class="info1">
          <div class="head"><img :src="usersDetail.pic" alt="" /></div>
          <div class="name">
            <div>{{ usersDetail.name }}</div>
            <div></div>
          </div>
          <div class="caidan" @click="replaceQRCode">
            <span class="iconfont icon-caidan"></span>
          </div>
        </div>
        <div class="info2">
          <div>{{ usersDetail.number }}</div>
        </div>
      </div>
      <div class="price">
        <div @click="linkTo('detailed')">
          <div>{{ usersDetail.balance }}</div>
          <div>我的余额</div>
        </div>
        <div>
          <div>{{ usersDetail.integral }}</div>
          <div>我的积分</div>
        </div>
        <div @click="linkTo('mycoupon')">
          <div>{{ usersDetail.coupon_num }}</div>
          <div>优惠券</div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="title">我的服务</div>
      <div class="ls">
        <div @click="linkTo('coupon')">
          <div>
            <span class="iconfont icon-lingjuan"></span>
          </div>
          <div class="text">领劵中心</div>
        </div>
        <div @click="linkTo('recharge')">
          <div>
            <span class="iconfont icon-chongzhi"></span>
          </div>
          <div class="text">充值中心</div>
        </div>
        <div @click="scan()" v-if="usersDetail.status===1">
          <div>
            <span class="iconfont icon-QRcode"></span>
          </div>
          <div class="text">扫一扫</div>
        </div>

         <div  @click="linkTo('user_orderList',0)" >
          <div>
            <span class="iconfont icon-order"></span>
          </div>
          <div class="text">订单列表</div>
        </div>
         <div  @click="linkTo('write_orderList',1)"  v-if="usersDetail.status===1">
          <div>
            <span class="iconfont icon-order1"></span>
          </div>
          <div class="text">服装订单</div>
        </div>
        <div   @click="linkTo('integralRecord')" >
          <div>
            <span class="iconfont icon-jifeng"></span>
          </div>
          <div class="text">积分记录</div>
        </div>

        <div  @click="linkTo('yplog')"  v-if="usersDetail.status===1">
          <div>
            <span class="iconfont icon-yinping"></span>
          </div>
          <div class="text">饮品订单</div>
        </div>
        <div @click="linkTo('explain')">
          <div>
            <span class="iconfont icon-shuoming"></span>
          </div>
          <div class="text">积分说明</div>
        </div>
        
      </div>
    </div>
    <div class="box2">
      <div class="title">我的服务</div>
      <div class="ls">
        <div @click="linkTo('my')">
          <div>
            <span class="iconfont icon-ziliang"></span>
          </div>
          <div class="text">我的资料</div>
        </div>
        <div @click="linkTo('feedback')">
          <div>
            <span class="iconfont icon-fankui"></span>
          </div>
          <div class="text">意见反馈</div>
        </div>
      </div>
    </div>

    
    <div>

  
      <van-popup v-model="showQRCode" class="popupQRCode">
        <!-- <div class="title">条形码：</div>
        <div>
          <barcode   v-if="showQRCode&&usersDetail.number"  :value="baecodeData"  :displayValue="false"  > 条形码显示失败时的内容 </barcode>
        </div> -->
       
         <div class="title">二维码：</div>
        <div class="erweima">
            <div class="floatDiv"></div>
            <vue-qr v-if="showQRCode"  :text="downloadData.url" qid="testid"></vue-qr>
        </div>
       </van-popup>
    </div>
  </div>
</template>
<script>
// import WX from '@/config/wx/index'

import { mapState,mapActions } from "vuex";
import vueQr from 'vue-qr'

import {hideWxMenu } from '@/assets/js/tools'
import VueBarcode from "vue-barcode";
import WeChat from '@/assets/js/wx/index'
let t;
export default {
   components: {
        vueQr,
        'barcode':VueBarcode
    },
  name: "home",
  data() {
    return {
     
      showQRCode: false,
      phone: "",
      sms: "",
      openid: "",
      userinfo: "",
    //二维码
      downloadData: {
                url: '',
                icon: ''
            },
            baecodeData:{},
    };
  },
  mounted() {
    t = this;

     hideWxMenu()
      if(t.$route.query.openid){
         localStorage.setItem('openid',t.$route.query.openid)
         t.openid=t.$route.query.openid;
 
          if(!t.usersDetail.id){
            t.GetUsersDetail({openid:t.openid})  
        }
     }else{
       if(localStorage.getItem('openid')){ 
     
        t.opneid=localStorage.getItem('openid')
       
         if(!t.usersDetail.id){
          
            t.GetUsersDetail({openid:t.opneid})  
          }
    }
     }
    
     


   
  
  
  
  },
  computed: {
    ...mapState(['usersDetail']),
  },
  methods: { 
    ...mapActions([
				'GetUsersDetail',
			]),
    scan(){
          WeChat._initWX().then(() => {
              wx.scanQRCode({
                  desc: 'scanQRCode desc',
             
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["barCode",'qrCode','datamatrix'], // 可以指定扫二维码还是一维码，默认二者都有
              success: function (res) {

                  var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                   
                    // if(result.search('number')==-1){
                    //     //  t.$router.push({ name: 'write',params:{type:1,}});
                    // }else{
                       t.$router.push({ name: 'write',params:{type:JSON.parse(result).type,number:JSON.parse(result).number,openid:t.usersDetail.openid} });
                  //  }
                  
              } 
            });
          })
    
    },
    linkTo(...params) {
     //个人码 
      // t.$router.push({ name: 'write',params:{type:1,number:'2021092047j1Tr',openid:'o3p1S6sRznpH2h2t8Ay2DqiQI1t4'}});
    //优惠卷吗
     //t.$router.push({ name: 'write',params:{type:2,number:'7LN2Sn',openid:'o3p1S6sRznpH2h2t8Ay2DqiQI1t4'}});
     
       t.$router.push({ name: params[0],query:{type:params[1]}});
    },
    replaceQRCode() {
      t.showQRCode = true;
    
      t.downloadData.url=JSON.stringify({type:1,number:t.usersDetail.number,openid:t.usersDetail.openid})
     
    },
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100vh;
  background: #ededed;
}

.popupQRCode{
  >div{
    text-align: center;
   
  }
 
  .title {
   text-align: left;
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .title::before {
    content: "";
    width: 0.3rem;
    background-color: white;
    height: 0.9rem;
    position: absolute;
    top: 53%;
    left: 0.5rem;
    
    transform: translateY(-50%);
  }

   >.title:nth-child(1){
         background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
    color: white;
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
    
  }
    >.title:nth-child(3){
          background: #34495e;
    color: white;
    margin-top: 1rem;
    
  }
}
.box1 {
  background: white;
  padding: 1rem 0;

  // background: red;
  // border: 1px solid black;
  // box-shadow: 0 0 1px black;

  > .card {
    margin: 0 1rem 1rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    background: #376157;
//      background-image: linear-gradient(
// 150deg, #00b894, #376157);
    padding: 1rem;
    height: 13rem;
    position: relative;
    > .info1 {
      display: flex;
      align-items: center;
      > .head {
        img {
          width: 3.5rem;
          border-radius: 50%;
        }
      }
      > .name {
        padding-left: 1rem;
        flex: 1;
        > div {
          color: white;
          line-height: 1.5rem;
        }
      }
      .icon-caidan {
        font-size: 1.5rem;
        color: white;
      }
    }
    .info2 {
      display: flex;
      align-items: center;

      color: white;
      > div {
        position: absolute;
        bottom: 1rem;
      }
      > div:nth-child(2) {
        right: 1rem;
      }
    }
  }

  .price {
    display: flex;
    align-items: center;

    flex-wrap: wrap;
    > div {
      width: 33%;
      text-align: center;
      > div:nth-child(1) {
        color: red;
      }
      > div:nth-child(2) {
        color: #676767;
      }
    }
    > div:nth-child(2) {
      border-left: 1px solid #ebebeb;
      border-right: 1px solid #ebebeb;
    }
  }
}

.box2,
.box3 {
  background-color: white;
  margin-top: 0.5rem;
  .title {
    border-bottom: 1px solid #ececec;
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .title::before {
    content: "";
    width: 0.1rem;
    background-color: red;
    height: 0.9rem;
    position: absolute;
    top: 50%;
    left: 0.5rem;
    border-radius: 1rem;
    transform: translateY(-50%);
  }
  .ls {
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 15%;
      margin-left: 2rem;
      margin: 1rem 1rem;
      > div {
        text-align: center;
      }
      > .text {
        font-size: 0.7rem;
        margin-top: 0.3rem;
      }
      .iconfont {
        color: #376157;
        font-size: 1.5rem;
      }
      .icon-ziliang,
      .icon-fankui {
        color: #376157;
        font-size: 1.5rem;
      }
    }
  }
}
.buts {
  display: flex;

  width: 100%;
  justify-content: center;
  > button {
    width: 100%;
    height: 2.5rem;
    background-color: #ff4600;
    color: white;
  }
}
.popupSty {
  width: 80%;
  border-radius: 0.5rem;
  padding: 1rem;
}


.qrcode{
    display: inline-block;
    img {
        width: 132px;
        height: 132px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
    }
}

/deep/ .van-popup--center{
  border-radius: .5rem;
}
.erweima{
  position: relative;
  .floatDiv{
    width: 100%;
    height: 100%;
    background: rgba(red, green, blue, 0);
    position: absolute;
    z-index: 123;
  }
}
.logo{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    border-radius: 50%;
    z-index: 10;
  img{
   border-radius: .2rem;
    width: 6rem;
    height: 6rem;
        display: block;
  }
}
</style>
 